<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<style type="text/css">
#add-customAlert{
	width: 880px;
	height: 465px;
	margin-left: -440px;
}
#add-customAlert i,#add_contact i,#add_employ i,#add_packModel i{font-style: normal;}
.add-customAlert-header{
	padding: 0px 5px 0px 15px;
	height: 36px;
	margin-top: -10px;
	font-size: 14px;
	line-height: 36px;
}
.add-customAlert-body{
	padding: 20px 30px 0px 60px;
	overflow: visible;
}
.add-customAlert-body label{
	margin-bottom: 0;
}
.add-customAlert-body select{
	/* position: relative;
	left: -3px; */
}
.add-customAlert-body span{
	display: inline-block;
	width: 120px;
	color: #666;
	font-family: 宋体;
	font-size: 14px;
	float: left;
	height: 30px;
	line-height: 30px;
	white-space:nowrap;
	margin-bottom: 10px;
	overflow:hidden;
	text-overflow:ellipsis;
}
.add-customAlert-body em{
	font-style: normal;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url(media/rms-images/baocuo.png) center no-repeat;
	position: absolute;
	top: 5px;
	right:15px;
}
.add-customAlert-body em:before{
	content: "";
	display: none;
	min-width: 60px;
	height: 20px;
	line-height: 20px;
	font-family: 宋体;
	font-size: 12px;
	text-align: center;
	background-color: #000;
	opacity: .7;
	position: absolute;
	top: -19px;
	left: -26px;
}
.add-customAlert-body td{
	padding: 7px;
	border: 0;
	position: relative;
}
#add_contact .modal-body td{
	position: relative;
}

/*------报错提示图标---------*/
.modal.hide > .modal-body form em{
	font-style: normal;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url(media/rms-images/baocuo.png) center no-repeat;
	position: absolute;
	top: 5px;
	right:15px;
}
.add-customer-body span {
	display: inline-block;
    width: 102px;
    color: #666;
    font-family: 宋体;
    font-size: 14px;
    float: left;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#addID-detail {
	height:350px;
}
</style>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<ul class="breadcrumb">
				<li><span class="c-999">告警管理<i
					class="icon-angle-right"></i></span>
				</li>
				<li><a class="c-666" onclick="util.showContent('pages/basic/customAlertMng.jsp')">自定义告警管理</a></li>
			</ul>
		</div>
	</div>

	<div class="search-box">
		<div class="search-title">
			<span class="search-criteria c-666">&nbsp;查询条件</span>
		</div>
		<form id="customer_search_form">
			<table class="search-body" border="0" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td>
					    <label class="my-label">告警编码:</label><input
						id="id_cusAlertCode" class="my-input" type="text" />
						
						<label class="my-label">告警名称:</label><input
						id="id_cusAlertName" class="my-input" type="text" />
						
						<label class="my-label">告警级别:</label>
						<select id="id_cusAlertLevel" class="my-select">
							<option value="">全部</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
		<ul class="search-button">
			<li><button class="btn blue" id="btn_query">查&nbsp;&nbsp;询</button></li>
			<li><button class="btn blue" id="btn_reset">重&nbsp;&nbsp;置</button></li>
		</ul>
	</div>
	<div class="table-con">
		<div class="table-head">
			&nbsp;&nbsp;&nbsp;<i class="icon-reorder"></i>&nbsp;列表详情
		</div>
		<div class="list-body">
			<div class="portlet-body">
				<p>
					<button type="button" class="btn blue hide" id="customAlert_table_add" data-toggle="modal">新&nbsp;&nbsp;增</button>
					<button id="customAlert_table_edit" class="btn green hide" data-toggle="modal">
							编&nbsp;&nbsp;辑
					</button>
					<button id="customAlert_table_del" class="btn red hide">
							删&nbsp;&nbsp;除
					</button>
				</p>
			</div>
			<div class="table-responsive">
				<table class="table table-striped table-hover table-bordered"
					id="customAlert_table">
					<thead>
						<tr>
							<th class="sorting_asc_disabled" style="width:8px;"><input
								type="checkbox" class="group-checkable"
								data-set="#customAlert_table .checkboxes" />
							</th>
							<th class="fourMinWidth">告警编码</th>
							<th class="fourMinWidth">告警名称</th>
							<th class="fourMinWidth">告警参数类别</th>
							<th class="fourMinWidth">告警定义</th>
							<th class="fourMinWidth">告警级别</th>
							<th class="fourMinWidth">告警类型</th>
							<th class="fourMinWidth">告警定义时间</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!--新增客户-->
	<div id="add-customAlert" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
		<div class="modal-header add-customAlert-header bg-green c-bold c-fff">
			<span id="add_title"></span>
		</div>
		<div class="modal-body add-customAlert-body">
			<form action="" id="customAlert_form">
				<input type="hidden" id="customAlert_id" name="pkId">
				<input type="hidden" id="alert_definition_id" name="alertDefinitionId"> 
				<table class="table">
					<tr>
						<td>
							<span class="al-right"><i class="c-red">*&nbsp;</i>告警编码：</span><input type="text" id="form_alertCode" name="alertCode"  maxlength="10" />
						</td>
						<td><span class="al-right"><i class="c-red">*&nbsp;</i>告警类型：</span>
							<input type="text" id="form_alertCategory" name="alertCategory" value="自定义告警" disabled="disabled"/></td>
					</tr>
					<tr>
						<td><span class="al-right"><i class="c-red">*&nbsp;</i>告警名称：</span><input type="text" id="form_alertName" name="alertName" maxlength="85"/></td>
						<td>
							<span class="al-right"><i class="c-red">*&nbsp;</i>告警级别：</span>
									<select id="form_alertLevel" name="alertLevel">
							</select>
						</td>
					</tr>
					<tr>
						<td >
							<span class="al-right"><i class="c-red">*&nbsp;</i>告警参数类别：</span>
									<select id="form_alertParam" name="alertParam">
							</select>
						</td>
						<td>
							
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span class="al-right">告警定义：</span>
							<input type="hidden" id="form_alertDefinition_code" name="alertDefinition_code">
							<input type="text" id="form_alertDefinition" name="alertDefinition"  disabled="disabled" style="width:79%" />
						</td>
						
					</tr>
					<tr id="param_value">
						<td colspan="2">
							<span class="al-right">参数范围：</span>
								<select id="comparison_operator_one" name="operatorOne" style="width:15%">
									<option value="">请选择</option>
									<option value="1">大于</option>
									<option value="2">大于等于</option>
								</select>
								<input type="text" id="comparison_value_one" name="valueTwo"  style="width:15%"/>
								<select id="logical_symbol" name="logicalSymbol" style="width:15%">
									<option value="">请选择</option>
									<option value="1">且</option>
									<option value="2">或</option>
								</select>
								<select id="comparison_operator_two" name="operatorTwo" style="width:15%">
									<option value="">请选择</option>
									<option value="3">小于</option>
									<option value="4">小于等于</option>
								</select>
								<input type="text" id="comparison_value_two" name="valueTwo"  style="width:15%"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="modal-footer al-center bg-fff">
			<button type="button"  class="btn green" style="margin-right: 25px;" id="form_customAlert_save">保存</button>
			<button type="button" data-dismiss="modal" class="btn red" id="form_btn_close">取消</button>
		</div>
	</div>
	
	<!--查看详情 begin------------>
	<div id="addID-detail" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
		<div class="modal-header add-customer-header bg-green c-bold c-fff">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
			自定义告警信息详情
		</div>
		<div class="modal-body add-customer-body">
			<table class="table">
				<tr>
					<td><span class="al-right">告警编码：</span><span class="my-text" id="detail_alertCode"></span></td>
					<td><span class="al-right">告警类型：</span><span class="my-text" id="detail_alertCategory">自定义告警</span></td>
				</tr>
				<tr>
					<td><span class="al-right">告警名称：</span><span class="my-text" id="detail_alertName"></span></td>
					<td><span class="al-right">告警级别：</span><span class="my-text" id="detail_alertLevel"></span></td>
				</tr>
				<tr>
					<td><span class="al-right">告警参数类别：</span><span class="my-text" id="detail_alertParam"></span></td>
					<td><span class="al-right">告警定义：</span><span class="my-text" id="detail_alertDefinition"></span></td>
					
				</tr>
				
				<tr id="param_value">
						<td colspan="2">
							<span class="al-right">参数范围：</span>
								<select id="detail_operator_one" name="operatorOne" style="width:15%" disabled="disabled">
									<option value="">请选择</option>
									<option value="1">大于</option>
									<option value="2">大于等于</option>
								</select>
								<input type="text" id="detail_value_one" name="valueTwo"  style="width:15%" disabled="disabled"/>
								<select id="detail_logical_symbol" name="logicalSymbol" style="width:15%" disabled="disabled">
									<option value="">请选择</option>
									<option value="1">且</option>
									<option value="2">或</option>
								</select>
								<select id="detail_operator_two" name="operatorTwo" style="width:15%" disabled="disabled">
									<option value="">请选择</option>
									<option value="3">小于</option>
									<option value="4">小于等于</option>
								</select>
								<input type="text" id="detail_value_two" name="valueTwo"  style="width:15%" disabled="disabled"/>
						</td>
				</tr>
				
								
			</table>
		</div>
	</div>	
</div>		
<!--查看详情 end------------>	
<!-- 模态窗口 str -->
<jsp:include page="/pages/common/modal.jsp"></jsp:include>

<script type="text/javascript" src="pages/system/js/customAlertMng.js"></script> 
<script type="text/javascript" src="script/jquery/js/jquery.cityselect.js"></script>
<script src="media/js/ui-modals.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
		customAlertTable.init();
		UIModals.init();
	});
</script>

